<template>
  <div class="contBody" style="position:relative">
    <h2 class="title">Tinymce 富文本编辑器</h2>
    <div style="text-align: left; margin: 0 0 20px 0">
      <el-button type="primary" @click="saveDocx"> 生成HTML文件 </el-button>
      <el-button type="primary" v-print="print"> 打印HTML文件 </el-button>
    </div>
    <TEditor v-model:value="val" style="position:absolute;top:100px;left:0;width:100%" />
    <div
      id="printArea"
      v-html="val"
      style="text-align: left; padding: 48px;"
    ></div>
  </div>
</template>

<script>
import TEditor from "@/components/teditor";
import { asBlob } from "html-docx-js-typescript";
import { saveAs } from "file-saver";
export default {
  name: "TEditorPage",
  components: {
    TEditor,
  },
  data() {
    let that = this;
    return {
      val: `<p class="MsoNormal" style="text-align: center;" align="center"><span style="font-family: 黑体; color: #e03e2d; font-size: 26pt;">XXXXX启动调度实施方案（XXX部分）</span></p>
<p class="MsoNormal" style="line-height: 150%;"><strong><span style="font-family: 黑体; line-height: 150%; font-size: 14pt;">一、启动范围</span></strong></p>
<p class="MsoNormal" style="line-height: 150%;"><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">1．XXXXX所有一、二次设备 </span><span style="mso-spacerun: 'yes'; font-family: Calibri; mso-fareast-font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><br /></span><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">2．XXXXX主变、XXXX主变（XXX管辖）</span></p>
<p class="MsoNormal" style="line-height: 150%;"><strong><span style="font-family: 黑体; line-height: 150%; font-size: 14pt;">二、调试项目</span></strong></p>
<p class="MsoNormal" style="line-height: 150%;"><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">1．XXX1号、2号主变冲击五次、核相。</span><span style="mso-spacerun: 'yes'; font-family: Calibri; mso-fareast-font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><br /></span><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">2．XXX10kV设备冲击一次，10kV母线压变二次定相。</span><span style="mso-spacerun: 'yes'; font-family: Calibri; mso-fareast-font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><br /></span><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">3．XXX1号、2号主变差动保护带负荷试验。（XXX管辖）</span><span style="mso-spacerun: 'yes'; font-family: Calibri; mso-fareast-font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><br /></span><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">4．XXX10kV备自投实跳试验。</span></p>
<p class="MsoNormal" style="line-height: 150%;"><strong><span style="font-family: 黑体; line-height: 150%; font-size: 14pt;">三、预定启动时间</span></strong></p>
<p class="MsoNormal" style="line-height: 150%;"><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">2023.3.8</span></p>
<p class="MsoNormal" style="line-height: 150%;"><strong><span style="font-family: 黑体; line-height: 150%; font-size: 14pt;">四、启动条件</span></strong></p>
<p class="MsoNormal" style="line-height: 150%;"><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">1．XXX启动范围内的所有一、二次设备施工结束，验收合格，监控信息与相应调控人员核对完备，设备可以带电，站内一次设备相位正确。</span><span style="mso-spacerun: 'yes'; font-family: Calibri; mso-fareast-font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><br /></span><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">2．XXX待用111开关、待用112开关、待用113开关、待用114开关、待用115开关、待用116开关、待用117开关、XX118开关、XX119开关、XX11A开关、待用11B开关、待用11C开关、待用121开关、待用122开关、待用123开关、待用124开关、待用125开关、待用126开关、XX131开关、待用132开关、XX133开关、待用134开关、待用135开关、待用136开关(以上间隔出线电缆均未接入)、1号电容器100开关、2号电容器200开关、3号电容器300开关、4号电容器400开关、1号接地变010开关、2号接地变020开关保护按定值单整定并投入。</span><span style="mso-spacerun: 'yes'; font-family: Calibri; mso-fareast-font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><br /></span><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">3．启动范围内所有设备均为冷备用状态。</span></p>
<p class="MsoNormal" style="line-height: 150%;"><strong><span style="font-family: 黑体; line-height: 150%; font-size: 14pt;">五、启动步骤</span></strong></p>
<p class="MsoNormal" style="line-height: 150%;"><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">1.XXXXXX冲击一次、定相。</span><span style="mso-spacerun: 'yes'; font-family: Calibri; mso-fareast-font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><br /></span><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">1.1.XXX：（参地调3.1）将10kVⅠ、Ⅱ、Ⅲ段母线压变改运行，将10kV Ⅰ、Ⅱ段母联110开关、1号主变101开关改运行。操作后通知地调。</span><span style="mso-spacerun: 'yes'; font-family: Calibri; mso-fareast-font-family: 宋体; mso-bidi-font-family: 'Times New Roman'; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;"><br /></span><span style="mso-spacerun: 'yes'; font-family: 黑体; line-height: 150%; font-size: 10.5000pt; mso-font-kerning: 1.0000pt;">2.银桥变10kV一次设备冲击（见附图2）</span></p>`,
      print: {
        id: "printArea",
        popTitle: "", // 打印配置页上方的标题
        extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
        preview: false, // 是否启动预览模式，默认是false
        previewTitle: "预览的标题", // 打印预览的标题
        previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
        zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
        previewBeforeOpenCallback() {
          console.log("正在加载预览窗口！");
          console.log(that.msg, this);
        }, // 预览窗口打开之前的callback
        previewOpenCallback() {
          console.log("已经加载完预览窗口，预览打开了！");
        }, // 预览窗口打开时的callback
        beforeOpenCallback() {
          console.log("开始打印之前！");
        }, // 开始打印之前的callback
        openCallback() {
          console.log("执行打印了！");
        }, // 调用打印时的callback
        closeCallback() {
          console.log("关闭了打印工具！");
        }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted() {
          console.log("点击v-print绑定的按钮了！");
        },
        // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: "",
        extarCss: "",
      },
    };
  },
  methods: {
    saveDocx() {
      asBlob(this.val).then((data) => {
        console.log(data);
        saveAs(data, "实施方案.docx");
      });
    },
    printDocx() {
      console.log("printDocx");
    },
  },
};
</script>
<style scoped>
.contBody .title {
  padding: 0 0 24px;
}
</style>

<style media="printContent">
/* 去掉页脚页眉 */
@page {
  size: auto;
  margin: 0mm auto;
}
</style>
